<template>
	<!-- 查看更多 -->
	<view :style="{'width':windowWidth +'px'}" class="mianshi">
		<baseHead :title="title" bg="#ffffff" color="#000000" :showRightIcon="isShow==true" :IconName="'search'"
			@clickRightIcon="clickRightIcon()">
			<template slot="textnr" v-if="isShow==true">
				<view :style="{'width':windowWidth +'px'}" class="tab_box">
					<u-tabs :list="list1" @click="clickTabs" :current="typeNumber"
						:itemStyle="{ height: '44px',width:'50px' }" :activeStyle="{color:'#3476FE'}"
						:lineColor="'#3476FE'">
					</u-tabs>
				</view>
			</template>
			<template slot="textnr" v-else>
				<view :style="{'width':windowWidth +'px'}" class="tab_box1">

					<pick-regions @getRegion="handleGetRegion" :defaultRegion="defaultRegion">
						<view class="li-box fl-lr-c">

							<view class="address_box">
								<image src="/static/image/my/dibiao.png"></image>
								<view>{{city}}</view>
								<u-icon name="arrow-down-fill" size="14" color="'#999999 "></u-icon>
							</view>
						</view>
					</pick-regions>

				</view>

			</template>
		</baseHead>
		<view style="height: 44px"></view>
		<scroll-view v-if="onLineList.length>0" scroll-y @scrolltolower="scrolltolower"
			:style="{'height':windowHeight-50-statusBarH-44+'px'}">
			<view class="content">
				<view v-for="(item,index) in onLineList" :key="index" class="item_box">
					<view @click="clickDetails(item,0)">
						<courseCourse :objectData="item"
							:QuantityName="optionNumber==1?'已购买':optionNumber==2?'已报名': '已购买'">

						</courseCourse>
					</view>

					<view class="shuqian" v-if="item.IsProbation">
						免费试听
					</view>


				</view>
			</view>
			<u-loadmore :status="status" style="padding-bottom: 40rpx;" />
		</scroll-view>
		<u-empty v-else mode="data" icon="/static/recruit/index/qsy.png" :width="windowWidth" marginTop="150">
		</u-empty>

	</view>
</template>

<script>
	import baseHead from "@/pages/component/baseHead.vue";
	import courseCourse from "@/pages/views/packageD/template/courseCourse.vue"
	import area from "@/pages/component/area.js"
	import pickRegions2 from "@/pages/component/pick-regions2/pick-regions2.vue";
	import pickRegions from "@/pages/component/pick-regions/pick-regions.vue";

	export default {
		components: {
			baseHead,
			courseCourse,
			pickRegions2,
			pickRegions,
		},

		data() {
			return {
				title: "线上课程",
				list1: [{
						id: 0,
						name: "默认",
					},
					{
						id: 1,
						name: "最新",
					},
					{
						id: 2,
						name: "最热",
					},

				],
				typeNumber: 0, //默认选中
				statusBarH: '', //状态栏高度
				windowHeight: '', //窗口高度
				windowWidth: '', //窗口宽度
				isShow: null, //
				PageIndex: 1, //页码
				PageSize: 10, //每页大小
				Address: '', //地址  //地区名称 拼接
				OrderByType: 0, //0默认 1最新 2最热
				onLineList: [], //线上课程
				optionNumber: null, //判断线上还是线下 精品
				status: 'loadmore',
				show: false,
				columns: area,
				// columnData:area,

				selRegion: "", //选择的省市区
				filter: ["重庆市", "上海市", "天津市", "北京市"],
				defaultRegion: ["", ""],
				isSel: false, //是否是选择
				city: "重庆市",
				// 市
				shiid: "",
				//省
				shengid: "",


			}
		},
		onLoad(option) {
			let obj = JSON.parse(decodeURIComponent(option.object))
			if (obj) {
				this.title = obj.title
				this.isShow = obj.isShow
				this.optionNumber = obj.optionNumber
			}
			this.kecheng()
		},
		created() {
			const app = getApp()
			this.statusBarH = app.globalData.statusBarH //状态栏高度
			this.windowHeight = app.globalData.phoneInformation.windowHeight //屏幕高度
			this.windowWidth = app.globalData.phoneInformation.windowWidth
		},
		watch: {
			selRegion: {
				handler(selRegion, oldRegion) {
					if (this.isSel) {
						if (this.filter.includes(selRegion[0])) {
							//存在
							if (selRegion[2] == "全部") {
								this.city = selRegion[0];
							} else {
								// console.log("相等")
								this.city = selRegion[0] + selRegion[2];
							}
						} else {
							if (selRegion[2] == "全部") {
								this.city = selRegion[0].replace("省", '') + selRegion[1];
							} else {
								this.city = selRegion[1] + selRegion[2];
							}
						}
					} else {
						if (this.filter.includes(selRegion[0])) {
							//存在
							this.city = selRegion[0];
							this.defaultRegion = [selRegion[0], selRegion[1]];
						} else {
							this.city = selRegion[1];
							this.defaultRegion = selRegion;
						}
					}
					//数据传出去
				},
				immediate: false,
			},
		},
		methods: {
			handleGetRegion(e, item) {
				//获取到的数据

				this.isSel = true;
				this.selRegion = e;
				// console.log(e)
				// console.log(item)

				// 市
				this.shiid = item[1].value;
				//省
				this.shengid = item[0].value;

				this.filter.some((res) => {
					if (res == e[0]) {
						this.Address = e[0];
						return true;
					} else {
						//地区名称 拼接
						this.Address = e.join("-");
					}
				});
				this.PageIndex = 1,
					this.status = 'loadmore',
					this.onLineList = []
				this.kecheng()
			},

			clickTabs(item) {
				if (item.id == this.OrderByType) return
				this.OrderByType = item.id
				this.PageIndex = 1
				this.PageSize = 10
				this.onLineList = []
				this.status = "loadmore";
				this.kecheng()
			},
			// 点击搜索
			clickRightIcon() {
				uni.navigateTo({
					url: "/pages/views/packageD/type-jobhunting/shuzihua/search"
				})
			},
			// 页面滚动到底部事件
			scrolltolower() {
				// 加载前值为loadmore，加载中为loading，没有数据为nomore
				if (this.status != "nomore") {
					this.status = "loading";
					this.kecheng();
				}
			},
			clickDetails(item){
				if(this.optionNumber==1){
					uni.navigateTo({
						url: `/pages/views/packageD/type-jobhunting/shuzihua/details?id=${item.CourseId}&index=${0}`,
					});
				}else if(this.optionNumber==2){
					uni.navigateTo({
						url: `/pages/views/packageD/type-jobhunting/shuzihua/OfflineCourseDetails?id=${item.CourseId}`,
					});
				}else{
					uni.navigateTo({
						url: `/pages/views/packageD/type-jobhunting/shuzihua/details?id=${item.CourseId}&index=${2}`,
					});
				}
			},
			kecheng() {
				let obj = {
					PageIndex: this.PageIndex,
					PageSize: this.PageSize,
					OrderByType: this.OrderByType
				}
				let obj1 = {
					Address: this.Address,
					PageIndex: this.PageIndex,
					PageSize: this.PageSize,
				}
				// 线上
				if (this.optionNumber == 1) {
					this.$http.digitalize.onlineEssence(obj).then(res => {

						if (res.Success) {
							if (res.Result.Items.length == 0) {
								// 没有数据----
								this.status = "nomore";
								return;
							}
							this.onLineList = this.onLineList.concat(res.Result.Items);
							if (res.Result.Items.length >= this.PageSize) {
								this.PageIndex++;
								// 表示还有数据
							} else {
								//没有更多数据了
								this.status = "nomore";
							}
						}

					});
				} else if (this.optionNumber == 2) {
					this.$http.digitalize.inPersonEssence(obj1).then(res => {
						if (res.Success) {
							if (res.Result.Items.length == 0) {
								// 没有数据----
								this.status = "nomore";
								return;
							}
							this.onLineList = this.onLineList.concat(res.Result.Items);
							if (res.Result.Items.length >= this.PageSize) {
								this.PageIndex++;
								// 表示还有数据
							} else {
								//没有更多数据了
								this.status = "nomore";
							}
						}

					});
				} else if (this.optionNumber == 4) {
					this.$http.digitalize.documentEssence(obj).then(res => {
						if (res.Success) {
							if (res.Result.Items.length == 0) {
								// 没有数据----
								this.status = "nomore";
								return;
							}
							this.onLineList = this.onLineList.concat(res.Result.Items);
							if (res.Result.Items.length >= this.PageSize) {
								this.PageIndex++;
								// 表示还有数据
							} else {
								//没有更多数据了
								this.status = "nomore";
							}
						}

					});
				}

			}
		}
	}
</script>

<style scoped lang="scss">
	.mianshi {
		box-sizing: border-box;
	}

	.tab_box {
		background-color: #ffffff;
		position: fixed;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 88rpx;
	}

	.tab_box1 {
		background-color: #ffffff;
		position: fixed;
		z-index: 999;
		height: 88rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.address_box {
			padding: 20rpx 40rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			image {
				width: 20rpx;
				height: 24rpx;
			}

			view {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				padding-left: 20rpx;
			}
		}
	}

	.content {
		padding: 30rpx 30rpx 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;


		.item_box {
			width: 48%;
			margin-bottom: 20rpx;
			position: relative;
			background-color: #fff;
			border-radius: 10rpx;

			.shuqian {
				position: absolute;
				left: 9rpx;
				top: 12rpx;
				width: 99rpx;
				height: 32rpx;
				background: #E0AF3C;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				opacity: 1;

				font-size: 20rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>